<template>
   <section>
      <p class="coursename">{{coursename}}</p>
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
         <el-form :inline="true" >
            <el-form-item>
               <el-button @click="reload" icon="el-icon-arrow-left" circle></el-button>
            </el-form-item>
            <el-form-item >
               <el-button type="primary" @click="showAdd" icon="el-icon-plus" >新增根节点</el-button>
               <el-button type="primary" @click="showExercise" >题库管理</el-button>
            </el-form-item>
            </el-form>
      </el-col>
      <br><br><br><br><br>
      <br><br>

            <div class="custom-tree-container">
               <div class="block">
                  <el-tree
                          :data="dataList"
                          :props="defaultProps"
                          show-checkbox
                          node-key="id"
                          default-expand-all
                          :expand-on-click-node="false"
                          :render-content="renderContent"
                           >
                  </el-tree>

               </div>
            </div>
      <!--新增course 界面-->
      <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
         <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
            <el-form-item label="名称" prop="name">
               <el-input  v-model="formData.name" @keyup.enter.native="add"   ></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="formVisible = false">取消</el-button>
            <el-button type="primary" v-on:click="add" :loading="submitLoading">提交</el-button>
         </div>
      </el-dialog>


      <el-dialog :title="formTitle" :visible.sync="formVisibleson" :close-on-click-modal="false">
         <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
            <el-form-item label="名称" prop="name">
               <el-input  v-model="formData.name" @keyup.enter.native="addEventFormSubmitBtn()"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="formVisibleson = false">取消</el-button>
            <el-button type="primary" v-on:click="addEventFormSubmitBtn()" :loading="submitLoading">提交</el-button>
         </div>
      </el-dialog>

      <!--知识点树编辑按钮界面-->
      <el-dialog :title="formTitle" :visible.sync="formVisibleedit" :close-on-click-modal="false">
         <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
            <el-form-item label="名称" prop="name">
               <el-input  v-model="formData.name" @keyup.enter.native="addEventFormSubmitBtn()"></el-input>
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button @click.native="formVisibleedit = false">取消</el-button>
            <el-button type="primary" v-on:click="editSubmitBtn()" :loading="submitLoading">提交</el-button>
         </div>
      </el-dialog>
   </section>
</template>



<script>
    export default {
        data(){
            return{
                courseid:'',
                coursename:this.$route.query.coursename,
                filters: {
                    keyword: ''
                },
                triggerCurrenNodeData:{},
                /*触发的当前节点*/
                triggerCurrenNode:{},
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                submitLoading: false,
                formVisible: false, //界面是否显示
                formVisibleson:false,
                formVisibleedit:false,
                isEdit:false,
                addEventForm:{
                    categoryName: '',
                    categoryFlag: '',
                },
                formTitle: '', //界面标题
                //新增页面数据
                formData: {
                    name: '',
                    parentid:'',
                    courseid:'',
                    children:[],
                },
                dataList:[],
                formRules: {
                    name: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],

                },
            }
        },
        methods: {
            renderContent(h, { node, data, store }) {
                return (
                    <span class="tree-expand">
                    <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 20px; padding-right: 8px;">
                    <span>
                    <span v-show="!node.isEdit">{node.label}</span>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <el-button class="el-icon-plus" style="font-size: 12px; " type="text" on-click={ () => this.append(data) }></el-button>
                <el-button class="el-icon-edit" style="font-size: 12px; color:#66CD00 " type="text" on-click={ () => this.edit(data,node) }></el-button>
                <el-button class="el-icon-delete" style="font-size: 12px;color:#CD0000" type="text" on-click={ () => this.remove(node,data) }></el-button>

                    </span>
                </span>
                </span>);
            },
            getDataList(){
                this.$http.get('api/kpoint/getKpointTree/'+this.courseid).then(res=>{
                    this.dataList=res.data.data;
                    console.log(this.dataList);
                }).catch(error => {
                    console.log(error);
                })
            },
            append(data) {
                this.formTitle = '新增子节点';
                this.formVisibleson = true;
                this.formData.parentid=data.id;
                this.formData.courseid=data.courseid;
                this.triggerCurrenNodeData=data;
                this.triggerCurrenNode = data.id;
            },
            addEventFormSubmitBtn(){
                this.submitLoading=true;
                console.log(this.formData);
                this.$http.post('api/kpoint/add',this.formData).then(res=>{
                    if (!res.data.code) {
                        this.$message({
                            message: '添加子节点成功',
                            type: 'success',
                        });
                        let result = res.data;

                        /*点击弹窗的确定按钮可以得到输入的数据，作为新的节点名称插入*/
                        /*如果没有子节点，就创建一个子节点插入*/
                        if (!this.triggerCurrenNodeData.children) {
                            this.$set(this.triggerCurrenNodeData, 'children', []);
                        };
                        //如果已有子节点，就把返回的数据push进去，插入到树形数据中
                        this.triggerCurrenNodeData.children.push(result);
                        this.getDataList();
                        this.formVisibleson = false;

                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                    this.submitLoading=false;
                }).catch(error=>{
                    console.log(error);
                });

            },
            edit(data){
                this.formTitle = '编辑节点内容';
                this.formVisibleedit = true;

                this.formData.id=data.id;
                this.formData.name=data.name;
            },
            editSubmitBtn(){
                this.submitLoading=true;

                this.$http.post('api//kpoint/modfiy/'+this.formData.id+'/'+this.formData.name).then(res=>{

                    if (res.data.code==0) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        });
                        this.getDataList();
                        this.formVisibleedit = false;
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                    this.submitLoading=false;
                }).catch(error=>{
                    console.log(error);
                });
            },
            showAdd: function () { //显示新增界面
                this.formTitle = '新增父节点';
                this.formVisible = true;
                this.formData.parentid=-1;
                this.formData.courseid=this.courseid;
            },
            showExercise: function () { //显示新增界面

                this.$router.push({path:'/importexercise',query:{courseid:this.courseid}});
            },
            remove(node,data){
                var value=data.id;
                this.$confirm('此操作将永久删除该节点, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get('api/kpoint/removeById/'+value).then(res=> {

                        if(!res.data.code) {

                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }  this.getDataList();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            add(){
                this.submitLoading=true;
                this.$http.post('api/kpoint/add',this.formData).then(res=>{
                    if (!res.data.code) {
                        this.$message({
                            message: '添加父节点成功',
                            type: 'success',
                        });
                        this.getDataList();
                        this.formVisible = false;
                        this.formData.parentid='';
                        this.formData.name='';
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                    this.submitLoading=false;
                }).catch(error=>{
                    console.log(error);
                });
            },
            reload(){
                this.$router.push({path:"/courseManage"});
            }
        },
        mounted() {
            this.courseid = this.$route.query.courseid;
            this.getDataList(); //进入页面就加载数据
        }

    }

</script>

<style scoped>
   .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;

   }
   .custom-tree-container{
      margin-left:80px;
   }
   .coursename{
      font-size:30px;
   }
</style>

